<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
	</head>
	<body>
        生命周期（钩子函数）：
        1.初始化阶段
            beforeCreate:初始化之前，组件实例刚被创建,什么也没有,只有默认的生命周期和事件
            created***:初始化之后,组件实例创建完成，初始化了 data 和 methods都赋值了, 
                   有了el,但是没有赋值(一般用于发送ajax)
        2.模板编译
            beforeMount:模板编译之前，已经存在 虚拟DOM了，el这个时候赋值了，并没有渲染到页面上
            mounted：模板编译之后, 虚拟DOM转化为真实DOM,并且渲染页面上
        3.更新阶段（data 的数据修改的时候，会触发）
            beforeUpdate：数据更新了，但是页面没有更新
            updated：数据更新了，并且页面也更新了
        4.销毁阶段（触发销毁  vm.$destory()）
            beforeDestroy :销毁之前，所有的功能和数据，methods 等，都可使用
            *destroyed：销毁之后，所有的都解除绑定，功能和属性，methods都无法使用，
                    保持原来的样式，不在受vue的控制

        激活时
        activated:  keep-alive,组件被激活时
        deactivated:  keep-alive,组件被激活完成
            
		<div id="app">
           <h1>{{msg}}---{{obj}}--{{n}}</h1>
           <button @click="addN">点击n++</button>
		</div>

        <button id="btn">点击修改msg</button>
        <button id="btna">销毁</button>
		<script>
            var vm=new Vue({
				el:"#app",
                data:{
                   msg:"hello",
                   n:100,
                   obj:{
                     name:"lili"
                   }
                },
                methods:{
                    addN(){
                        this.n++;
                    }
                },
                // beforeCreate () {
                //     console.log(this.$el);
                //     console.log(this.$data);
                //     console.log(this.msg);
                //     //this.obj["ageb"]=182;//报错
                // },
                // created() {
                //     console.log(this.$el);
                //     console.log(this.$data);
                //     console.log(this.msg);
                //     this.obj["agea"]=181;
                // },
                // beforeMount(){
                //     //console.log(this.$el);
                //     this.obj["age"]=18;
                // }
                // mounted(){
                //     this.obj["num"]=100;
                // }
                // beforeUpdate () {
                //     console.log(this.msg)
                // },
                // updated () {
                //     console.log(this.msg)
                // }
                beforeDestroy () {
                    console.log(this.n)
                },
                destroyed () {
                    console.log(this.n)
                }
			})

            btn.onclick=function(){
                vm.msg="哈哈哈";
            }
            btna.onclick=function(){
                vm.$destroy()
            }
		</script>
	</body>
</html>